<template>
    <section>
        <div class="container">
            <div class="User SignInbox">
                <div class="image">
                    <img src="@/assets/image/explore-img.png">
                </div>
                <div class="fromBox">
                    <form>
                        <h2>登录</h2>
                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" size="large">
                            <el-form-item prop="userName">
                                <el-input v-model="ruleForm.userName" placeholder="userName" />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input show-password type="password" v-model="ruleForm.password"
                                    placeholder="password" />
                            </el-form-item>
                            <el-form-item>
                                <el-button class="login-btn" type="primary" @click="login">
                                    Login
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <p class="signup">Don't have an account ?<a @click="signUp">Sign Up</a></p>
                    </form>
                </div>
            </div>
            <div class="User SignUpbox">
                <div class="fromBox">
                    <form>
                        <h2>注册</h2>
                        <el-form width="100%" ref="ruleFormRef" :model="ruleForm" :rules="rules" size="large">
                            <el-form-item prop="userName">
                                <el-input v-model="ruleForm.userName" placeholder="userName" />
                            </el-form-item>
                            <el-form-item prop="nickName">
                                <el-input v-model="ruleForm.nickName" placeholder="nickName" />
                            </el-form-item>
                            <el-form-item prop="email">
                                <el-input v-model="ruleForm.email" placeholder="email" />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input show-password type="password" v-model="ruleForm.password"
                                    placeholder="password" />
                            </el-form-item>
                            <el-form-item prop="ConfirmPassword">
                                <el-input show-password v-model="ruleForm.ConfirmPassword"
                                    placeholder="ConfirmPassword" />
                            </el-form-item>
                            <el-form-item>
                                <el-button class="logUp-btn" type="primary" @click="logup">
                                    Logup
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <p class="signin">If you have an account ?<a @click="signIn">Sign In</a></p>
                    </form>
                </div>
                <div class="image">
                    <img src="@/assets/image/home-img.png">
                </div>
            </div>
        </div>
    </section>

</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue';
import { loginAPI, registerAPI } from '@/api'
import { useUserInfoStore } from '@/store/userInfo/index.js';

const originaluserData = () => ({
    userName: '',
    password: '',
    nickName: '',
    email: '',
    ConfirmPassword: ''
})

let ruleForm = reactive(originaluserData())

const $router = useRouter()

const signUp = () => {
    let container = document.querySelector(".container")
    container.classList.add('active')
}
const signIn = () => {
    let container = document.querySelector(".container")
    container.classList.remove('active')
}

const rules = reactive({
    nickName: [
        { required: true, message: 'Please input nickName', trigger: 'blur' },
    ],
    userName: [
        { required: true, message: 'Please input username', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input password', trigger: 'blur' },
    ],
    ConfirmPassword: [
        { required: true, message: 'Please input ConfirmPassword', trigger: 'blur' },
    ],
    email: [
        { required: true, message: 'Please input email', trigger: 'blur' },
    ],
})
const ruleFormRef = ref(null)

const login = async () => {
    let res = await loginAPI(ruleForm)
    if (res != false) {
        ElMessage({
            duration: 800,
            message: "登陆成功",
            type: "success"
        })
        localStorage.setItem('token', res.token)
        useUserInfoStore().setUserInfo(res.userInfoVo)
        Object.assign(ruleForm, originaluserData())
        $router.push({
            path: '/layout/home',
        }).catch(err => { })
    }
}

const logup = async () => {
    let res = await registerAPI(ruleForm)
    if (res != false) {
        ElMessage.success("注册成功")
        Object.assign(ruleForm, originaluserData())
        signIn()
    }
}

</script>


<style lang="scss" scoped>
section {
    position: relative;
    min-height: 100vh;
    background: url("@/assets/image/s5.png") no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

section .container {
    position: relative;
    width: 800px;
    height: 500px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

section .container .User {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
}

section .container .User .image {
    position: relative;
    height: 100%;
    width: 50%;
    transition: 0.5s;
    // background: #777;
    background-color: rgba(255, 255, 255, 0.1);
}

section .container .User .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

section .container .User .fromBox {
    position: relative;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    transition: 0.5s;
}

section .container .User .fromBox h2 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    margin: 20px 0;
    color: #555;
}


section .container .User .fromBox .signup,
section .container .User .fromBox .signin {
    cursor: pointer;
    font-weight: 600;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
    text-transform: uppercase;
    font-weight: 400;
}

section .container .User .fromBox .signup a {
    font-weight: 600;
    text-decoration: none;
    color: #677eff;
}

section .container .User .fromBox .signin a {
    font-weight: 600;
    text-decoration: none;
    color: #677eff;
}


section .container .SignUpbox {
    pointer-events: none;
}

section .container.active .SignUpbox {
    pointer-events: initial;
}

section .container .SignUpbox .fromBox {
    left: 100%;
}

section .container.active .SignUpbox .fromBox {
    left: 0;
}

section .container .SignUpbox .image {
    left: -100%;
}

section .container.active .SignUpbox .image {
    left: 0;
}


section .container .SignInbox .fromBox {
    left: 0;
}

section .container.active .SignInbox .fromBox {
    left: 100%;
}

section .container .SignInbox .image {
    left: 0;
}

section .container.active .SignInbox .image {
    left: 100%;
}


@media(max-width:991px) {

    section .container {
        max-width: 400px;
    }

    section .image {
        display: none;
    }

    section .container .User .fromBox {
        width: 100%;
    }

    section {
        background-position: left;
    }
}
</style>